<script setup lang="ts">
  defineProps({
    good: {
      type: Object,
      default: () => {},
    },
  })
</script>
<template>
  <div class="goods-item">
    <el-progress type="circle" :percentage="good.percentage" :status="good.status" :width="130">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ good.num }}人</span>
        <span class="percentage-label">{{ good.desc }}</span>
      </template>
    </el-progress>
  </div>
</template>

<style scoped lang="scss">
  .percentage-value {
    display: block;
    font-size: 30px;
  }
  .percentage-label {
    display: block;
    margin-top: 10px;
    font-size: 18px;
  }
  .goods-item {
    width: 110px;
    padding: 3px 9px;
    text-align: center;
    transition: all 0.5s;
  }
</style>
